<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Transparent Login Form UI</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="../static/js/jquery-3.7.1.js"></script>
</head>
<body>
<div class="bg-img">
    <div class="content">
        <header>Login Form</header>
        <form method="POST" action="/login">
            <input type="hidden" name="came_from" value="{{ came_from }}"/>
            <div class="field">
                <span class="fa fa-user"></span>
                <input type="text" required placeholder="账号" name="account" id="account">
            </div>
            <span id="error_msg" style="color: red;">{{ msg }}</span>
            <div class="field space">
                <span class="fa fa-lock"></span>
                <input type="password" class="pass-key" required placeholder="密码" name="pwd">
                <span class="show">SHOW</span>
            </div>
            <div class="pass">
                <a href="#">Forgot Password?</a>
            </div>
            <div class="field">
                <input type="submit" value="登录">
            </div>
        </form>
        <div class="login">Or login with</div>
        <div class="links">
            <div class="facebook">
                <i class="fab fa-facebook-f"><span>Facebook</span></i>
            </div>
            <div class="instagram">
                <i class="fab fa-instagram"><span>Instagram</span></i>
            </div>
        </div>
        <div class="signup">Don't have account?
            <a href="#">Signup Now</a>
        </div>
    </div>
</div>

<script>
    const pass_field = document.querySelector('.pass-key');
    const showBtn = document.querySelector('.show');
    showBtn.addEventListener('click', function () {
        if (pass_field.type === "password") {
            pass_field.type = "text";
            showBtn.textContent = "HIDE";
            showBtn.style.color = "#3498db";
        } else {
            pass_field.type = "password";
            showBtn.textContent = "SHOW";
            showBtn.style.color = "#222";
        }
    });
    $(function () {
        $("#account").blur(function () {
            // 1.获取表单输入的内容
            var account = $("#account").val();
            // 2.发送ajax请求
            $.ajax({
                url: '/login/user_verify', // ajax 请求的目标位置
                type: 'get', // 请求方式
                data: {'account': account}, // 要给后端传递的数据。
                success: function (data) {
                    // console.log(data);
                    var code = data.code;
                    if (code == '200') {
                        $("#error_msg").text('');
                    } else {
                        $("#error_msg").text(data.msg);
                    }
                },
                error: function (data) {
                    alert('error');
                }
            })
        });
    })
</script>


</body>
</html>
